<!-- 等待加载 -->

<template>
    <div class="dot-flashing">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</template>

<script>
    export default {
        name: "dot_flashing"
    }
</script>

<style scoped>
    .dot-flashing {
        display: inline-flex;
        margin: 0px 10px 0px 10px;
        gap: 5px;
    }
    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d1b4dc;
        opacity: 0.3;
        animation: dot-flash 1s infinite alternate;
    }
    .dot:nth-child(1) { animation-delay: 0s; }
    .dot:nth-child(2) { animation-delay: 0.3s; }
    .dot:nth-child(3) { animation-delay: 0.6s; }
    @keyframes dot-flash {
        to { opacity: 1; }
    }
</style>
